<template>
  <div class="about">
    <button @click="flag = !flag">{{ flag ? "完成" : "编辑" }}</button>
    <van-row v-for="item in $store.state.list" :key="item.id">
      <van-col span="4">
        <input type="checkbox" v-model="sel" :value="item" @change="change" />
      </van-col>
      <van-col span="20">
        <van-card
          :num="item.num"
          :price="item.price"
          :title="item.title"
          thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
        />
      </van-col>
    </van-row>

    <van-submit-bar
      :price="3050"
      :button-text="flag ? '删除' : '提交'"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checked" @click="changeall">全选</van-checkbox>
    </van-submit-bar>

    <!-- 如果用原生的复选框就用change事件  如果是vant的复选框用click事件 -->
  </div>
</template>
<script>
// import { Toast } from "vant";
// import { Dialog } from "vant";
export default {
  data() {
    return {
      sel: [],
      checked: false,
      flag: false,
    };
  },
  mounted() {
    // alert({ name: 111 } == { name: 111 });
  },
  methods: {
    change() {
      if (this.$store.state.list.length == this.sel.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    changeall() {
      if (this.checked == true) {
        this.sel = this.$store.state.list;
      } else {
        this.sel = [];
      }
    },
    onSubmit() {
      if (this.flag == true) {
        this.$dialog
          .confirm({
            title: "删除",
            message: "真的要删吗",
          })
          .then(() => {
            this.$store.commit("removes", this.sel);
            this.$toast.success("成功");
          })
          .catch(() => {
            // on cancel
          });
      } else {
        // alert("不能删除");
        this.$toast.fail("不能删除");
      }
    },
    // [1001,1002]
  },
};
</script>
